﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Report1.aspx.cs" Inherits="PromotionEngine.Report1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <div id="example">
        <div class="demo-section k-content">
            <div id="chart">
            </div>
        </div>
        <div class="box" style="display: none;">
            <div class="box-col">
                <h4>
                    Gap</h4>
                <ul class="options">
                    <li>
                        <input id="gap" type="number" value="1.5" step="0.1" style="width: 80px;" />
                        <button id="getGap" class="k-button">
                            Set gap</button>
                    </li>
                </ul>
            </div>
            <div class="box-col">
                <h4>
                    Spacing</h4>
                <ul class="options">
                    <li>
                        <input id="spacing" type="number" value="0.4" step="0.1" style="width: 80px;" />
                        <button id="getSpacing" class="k-button">
                            Set spacing</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var reportData;
        function GetReport() {
            $.ajax({
                type: "POST",
                url: "Report1.aspx/GetReportThisYearVSLastYear",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status == 500) {
                        alert('Internal error: ' + jqXHR.responseText);
                    } else {
                        alert('Unexpected error.' + jqXHR.responseText);
                    }
                }
            });
        }
        //Bind Data
        function OnSuccess(response) {
            var data = $.parseJSON(response.d);
            createChart(data)
        };
        function createChart(reportData) {
            $("#chart").kendoChart({
                  dataSource: {
                    data: reportData
                },
                title: {
                    text: ""
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "This Year",
                   field: "ThisYear",
                }, {
                    name: "Last Year",
                   field: "LastYear",
                }],
                valueAxis: {
                    line: {
                        visible: false
                    }
                },
                categoryAxis: {
                    field: "MonthN",
                    majorGridLines: {
                        visible: false
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}"
                }
            });
        }
        $(document).ready(function () {
            GetReport();
            $("#example").bind("kendo:skinChange", createChart(reportData));
            var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
            $("#getGap").click(function () {
                firstSeries[0].gap = parseFloat($("#gap").val(), 10);
                chart.redraw();
            });

            $("#getSpacing").click(function () {
                firstSeries[0].spacing = parseFloat($("#spacing").val(), 10);
                chart.redraw();
            });

            if (kendo.ui.NumericTextBox) {
                $("#gap").kendoNumericTextBox();
                $("#spacing").kendoNumericTextBox();
            }
        });
    </script>
</asp:Content>
